<template>
    <view class="tabbar">
        <view
            class="tab"
            v-for="(item,index) in tab"
            :key="index"
            @click="change(index)"
            :class="active == index && !showLabel ? 'change': ''"
        >
            <view class="single" v-if="!showLabel">{{ item.label }}</view>
            <view
                class="double"
                v-if="showLabel"
                :class=" active == index && showLabel ? 'change_color' : ''"
            >
                <p>{{ item.label }}</p>
                <span>{{ item.value }}</span>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        tab: {
            type: Array,
            default: [],
        },
		showLabel: {
			type: Boolean,
			default: true
		},
		active: {
			type: Number,
			default: 0
		}
    },
    components: {},
    data() {
        return {
            // active: 0,
        };
    },
    computed: {},
    methods: {
        change(index) {
            this.$emit("change_status", index);
        },
    },
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {
        // #ifdef MP-ALIPAY
         this.$getDom('.tabbar').exec((res)=>{
             uni.setStorage({
                 key:'tabbarDom',
                 data:res
             })
         })
         // #endif
    },
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
};
</script>
<style scoped lang='scss'>
@import "./index.scss";
.change {
    font-weight: 600;
    padding-bottom: 20rpx;
    position: relative;
    &:after {
        content: "";
        width: 32rpx;
        height: 8rpx;
        border-radius: 4rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #ff504c;
    }
}
.change_color {
    p {
        color: #ff4642 !important;
    }
    span {
        line-height: 32rpx !important;
        border-radius: 999px;
        background-color: #ff4642;
        color: #fff !important;
    }
}
</style>